<template>
  <a-modal
    v-model:open="visible"
    title="移动到"
    width="500px"
    @ok="handleMove"
    @cancel="handleCancel"
  >
    <div class="move-info">
      <p>已选择 {{ selectedRows.length }} 个商品</p>
    </div>

    <a-form layout="vertical">
      <a-form-item label="目标分类" required>
        <a-select
          v-model:value="targetCategory"
          placeholder="请选择目标分类"
          style="width: 100%"
        >
          <a-select-option
            v-for="category in availableCategories"
            :key="category.id"
            :value="category.id"
          >
            {{ category.name }}
          </a-select-option>
        </a-select>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { message } from 'ant-design-vue';

// 定义props
interface Props {
  visible: boolean;
  selectedRows: any[];
  categories: any[];
}

const props = withDefaults(defineProps<Props>(), {
  visible: false,
  selectedRows: [],
  categories: [],
});

// 定义emits
const emit = defineEmits<{
  'update:visible': [value: boolean];
  move: [targetCategory: string]
}>();

// 响应式数据
const targetCategory = ref('');

// 计算属性
const visible = computed({
  get: () => props.visible,
  set: (value) => emit('update:visible', value),
});

const availableCategories = computed(() => {
  return props.categories.filter((category) => category.id !== 'all');
});

// 方法
const handleMove = () => {
  if (!targetCategory.value) {
    message.warning('请选择目标分类');
    return;
  }

  emit('move', targetCategory.value);
  message.success('移动成功');
  visible.value = false;
  targetCategory.value = '';
};

const handleCancel = () => {
  visible.value = false;
  targetCategory.value = '';
};
</script>

<style scoped>
.move-info {
  padding: 12px;
  margin-bottom: 16px;
  background: #f0f9ff;
  border-left: 4px solid #1890ff;
  border-radius: 4px;
}
</style>
